const TitleTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>职称报考信息</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" :rules="rules" label-width="117px" size="small">
      <el-row>
      <el-col :span="8">
        <el-form-item prop="professionalLevel" label="职称等级">
        <el-select v-model="formData.professionalLevel" placeholder="请选择">
          <el-option v-for="item in professionalLevelList" :key="item.id" :label="item.titleName" :value="item.titleName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="professionalSeries" label="职称系列">
        <el-select v-model="formData.professionalSeries" placeholder="请选择" @change="handleSeriesChange">
          <el-option v-for="item in professionalSeriesList" :key="item.id" :label="item.professionalSeries" :value="item.professionalSeries"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="majorName" label="报考专业">
        <el-select v-model="formData.majorName" placeholder="请选择">
          <el-option v-for="item in majorNameList" :key="item.id" :label="item.occupationInfoName" :value="item.occupationInfoName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="batch" label="批次">
        <el-select v-model="formData.batch" placeholder="请选择">
          <el-option v-for="item in batchList" :key="item.id" :label="item.batch" :value="item.batch"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
  </el-card>
`;

Vue.component("app-title", {
  props: ['type'],
  name: "app-title",
  template: TitleTemplate,
  mounted() {
    this.getList();
  },
  data() {
    return {
      rules: {
        professionalLevel: [
          {
            required: true,
            message: '请选择职称等级',
          }
        ],
        professionalSeries: [
          {
            required: true,
            message: '请选择职称系列',
          }
        ],
        majorName: [
          {
            required: true,
            message: '请选择报考专业',
          }
        ],
        batch: [
          {
            required: true,
            message: '请选择批次',
          }
        ],
      },
      majorNameList: [],
      professionalLevelList: [],
      professionalSeriesList: [],
      batchList: [],
      formData: {
        professionalLevel: "",
        professionalSeries: '',
        majorName: '',
        batch: '',
      },
    };
  },
  computed: {
    isDisable() {
      return this.type === 'look';
    },
  },
  methods: {
    handleSeriesChange(value) {
      const id = this.professionalSeriesList.find(item => item.professionalSeries === value).id;
      $.ajax({
        url: baseUrl + "education/queryOccupationInfoList",
        method: "Post",
        data: "occupationId=" + id,
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.majorNameList = data;
        },
      });
    },

    getList() {
      $.ajax({
        url: baseUrl + "education/queryTitleList",
        async: false,
        method: "Post",
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.professionalLevelList = data;
        },
      });

      $.ajax({
        url: baseUrl + "education/queryBatchList",
        method: "Post",
        data: {
          trainType: "title",
        },
        success: (data) => {
          this.batchList = data;
        },
      });

      $.ajax({
        url: baseUrl + "education/queryProfessionalSeriesList",
        async: false,
        method: "Post",
        headers: {
          Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
        },
        success: (data) => {
          this.professionalSeriesList = data;
        },
      });
    },
  },
});
